<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #container {
            margin: 100px auto;
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }

        #imgbox {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #imgbox img {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        #imgbox img:nth-child(1) {
            z-index: 2;
        }

        #doubox {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            width: 150px;
            height: 30px;
            /* background-color: rgba(135, 207, 235, 0.416);             */
            border-radius: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 999;
        }

        #doubox li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: pink;
        }

        #doubox li:nth-child(1) {
            background-color: red;
        }

        #leftArrow {
            left: 0px;
        }

        #rightArrow {
            right: 0px;
        }

        .arrow {
            position: absolute;
            width: 50px;
            height: 40px;
            font-size: 30px;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            text-align: center;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    
<body>
    <div id="container">
        <div id="imgbox">
            <img src="../images/01.png">
            <img src="../images/02.png">
            <img src="../images/617230ce8e9f09088e0d2137_raw.gif">
            <img src="../images/617230cf8e9f09088e0d213e_raw.gif">
            <img src="../images/C3822DCDD48841026EAEB1AB954B2F86.png">
            <img src="../images/617230ce8e9f09088e0d213c_1024.jpg">
        </div>
        <ul id="doubox">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div id="leftArrow" class="arrow"> &lt; </div>
        <div id="rightArrow" class="arrow"> &gt; </div>
    </div>
    <script>
        let currIndex=0
        let myTimer
        let imgBox = document.querySelector('#imgbox')
        let imgDoms =document.querySelectorAll('#imgbox img')
        let liDoms = document.querySelectorAll('#doubox li')

        window.onload =function(){
            autoplay()
            for(let i=0;i<liDoms.length;i++){
                liDoms[i].onclick=function(){
                    goImg(i)
                }
            }
        }
        let leftArrow = document.getElementById("leftArrow");
        leftArrow.onclick =function () {
            goImg(currIndex-1)
        }
        let rightArrow=document.getElementById('rightArrow')
        rightArrow.onclick =function(){
            goImg(currIndex+1)
        }
        function autoplay(){
            myTimer = setInterval(function(){
                goImg(currIndex+1)
            },2000)
        }
        let container =document.getElementById('container')
        container.onmouseenter =pause;
        container.onmouseleave=autoplay
        function goImg(index){

            let preIndex = currIndex
            currIndex=index
            if(currIndex>5){
                currIndex=0
            }else if(currIndex<0){
                currIndex=5
            }
            imgDoms[preIndex].style.zIndex=1
            imgDoms[currIndex].style.zIndex=2


            liDoms[preIndex].style.backgroundColor='pink'
            liDoms[currIndex].style.backgroundColor='red'
        }
        function pause(){
           window.clearInterval(myTimer)
        }
    </script>
</body>
</html>